<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue_dev.js"></script>
	<script src="axios.min.js"></script>
	<script src="jquery-3.3.1.min.js"></script>	
</head>

<body>
	<div id="app">
		<h1>user</h1>
		姓名：<input type="text" id="name" placeholder="姓名">
		性别：<input type="text" id="sex" placeholder="性别">
		年龄：<input type="text" id="age" placeholder="年龄">
		<input type="submit"  value="添加" v-on:click="create()"><!-- 当这个按钮被点击的时候，调用create函数 -->
		<div >

			<table>
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
				</tr>
				<tr v-for="(user,index) in info"><!-- 遍历info，info中的每条数据都叫user，每条数据的索引都叫index -->
					<td>{{ user.id }}</td>
					<td>{{ user.name }}</td>
					<td>{{ user.sex }}</td>
					<td>{{ user.age }}</td>
					<td><a v-on:click="del(user.id)" href="#">删除</a></td><!-- 当这个按钮被点击时，调用del函数，并将当前行的index作为参数 -->
					<td>
						<a target="_Blank"  v-bind:href="'edit.html?id='+user.id">编辑</a>
						<!-- 当这个按钮被点击时，跳转到编辑界面，并将当前的user.id作为url参数传过去 -->
					</td>
					
				</tr>
			</table>

			
			
		</div>

	</div>

	<script>
		// 新建一个Vue实例，赋值给app
		var app = new Vue({
			//挂载元素
			el: '#app',
			//数据
			data() {
				return {
					info: null
				}
			},
			//方法
			methods:{
				//删除函数
				del:function(index){
					var _this = this;
					//发送delete请求
					axios
					.delete('http://127.0.0.1/RESTful/user/'+index)//请求目标（看index.php）
					.then(function (response) {
						_this.info = response.data;//将获取到的数据给info
						alert("删除成功");
					})
					.catch(function(error) {
						console.log(error);//遇到异常时，在控制台显示错误信息
						alert("删除失败");
					})
				},

				//添加函数
				create:function () {
					var _this = this;
					//选取html元素
					var name = $("#name");
					var sex= $("#sex");
					var age= $("#age");

					axios.post("http://127.0.0.1/RESTful/user?name="+name.val()+"&sex="+sex.val()+"&age="+age.val())//发送post请求（看index.php）
					.then(function (response) {
						_this.info = response.data;//将获取到的数据给info
						//然后将文本框的值设置为空字符串
						name.val("");
						sex.val("");
						age.val("");
						alert("添加成功");
					})
					.catch(function (error) {
						console.log(error);//遇到异常时，在控制台显示错误信息
					});

				}
				
			},
			filters: {
				currencydecimal(value) {
					return value.toFixed(2)//返回小数点后保留两位后的参数
				}
			},
			//当挂载元素全部加载完成时执行的钩子函数
			mounted() {
				//发送get请求
				axios
				.get('http://127.0.0.1/RESTful/index.php?user=all')//请求目标（看index.php）这里也可以写成http://localhost/restful/user
				.then(response => (this.info = response.data))//将获取到的数据给info
				.catch(error => {
					console.log(error)//遇到异常时，在控制台显示错误信息
				})
			}
		});


	</script>
</body>

</html>